<template>
  <div class="search">
    <div class="select">
      <p @click="gocss()">{{ ent }}</p>
      <ul class="seleck-item" v-if="css">
        <li v-for="i of select" @click="enten(i)">
          {{ i.name }}
        </li>
      </ul>
    </div>
    <input type="text" v-model="txt" @keyup.enter="go()" />
    <div class="go" @click="go()">&#xe752;</div>
  </div>
</template>
<script>
export default {
  name: "search",
  data() {
    return {
      txt: "",
      ent: "百度",
      select: [
        { name: "百度", ulr: "https://www.baidu.com/s?wd=" },
        { name: "搜狗", ulr: "https://www.sogou.com/tx?query=" },
        { name: "bing", ulr: "https://cn.bing.com/search?q=" },
      ],
      css: false,
    };
  },
  methods: {
    enten(i) {
      this.ent = i.name;
      this.css = false;
    },
    gocss() {
      this.css = !this.css;
    },
    go() {
      if (this.txt != "") {
        this.select.map((item) => {
          if (item.name === this.ent) {
            window.open(item.ulr + this.txt);
          }
        });
      };
      this.txt = '';
    },
  },
};
</script>
<style scoped>
.search {
  width: 100%;
  display: flex;
  justify-content: center;
}
.search .go {
  width: 60px;
  background: skyblue;
  border: 1px #fff solid;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 25px;
}
.search input {
  width: 60%;
  height: 40px;
  border: 1px #fff solid;
  background: rgba(255, 255, 255, 0.308);
  outline: none;
  padding: 0px 20px;
  font-size: 24px;
  color: rgb(68, 124, 228);
}
.search .select {
  color: skyblue;
  position: relative;
  width: 70px;
  text-align: center;
  background: #fff;
}
.search .select p {
  height: 40px;
  line-height: 40px;
}
.seleck-item {
  position: absolute;
  background: #fff;
}
.seleck-item li {
  width: 70px;
  height: 40px;
  line-height: 40px;
}
</style>